<template>
	<view :class="{'property-container': true, 'display-flex': detailData.tenementNotice.length < 1}" >
		<new-list-image :listArr="detailData.tenementNotice" :isShowHead="false" :isShowMore="false"></new-list-image>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue"
	import { onReachBottom } from '@dcloudio/uni-app'
	import {getWNoticeList} from '@/api_request/api';
	import { useInfoStore } from '@/store/userInfo';
	import { storeToRefs } from 'pinia';
	
	const userStore = useInfoStore()
	const {userInfo} = storeToRefs(userStore)
	
	const detailData = reactive({
		tenementNotice: [],
		isLoading: false,
		page_num: 1,
		page_size: 10
	})
	
	onReachBottom(() => {
		if(detailData.isLoading) return
		detailData.page_num+=1
		getNoticeList()
	})
	
	const getNoticeList = async () => {
		detailData.isLoading = true;
		const params = {
			page_num: detailData.page_num,
			page_size: detailData.page_size,
			community_id: userInfo.value.community_id,
			merchant_id: userInfo.value.merchant_id
		}
		const {data, code, message} = await getWNoticeList(params)
		detailData.isLoading = false;
		if(code == 200) {	
			let resetArr = data.list.map((item: any) => {
				return {
					...item,
					projectName: item.notice_community.map((ele:any)=> ele.name).join(','),
					imgUrl: ''
				}
			})
			resetArr.forEach((item:any) => {
				item.content.forEach((ele:any) => {
					if(ele.tag == 'img') {
						ele.attrs.forEach((val:any) => {
							if(val.name == 'src') {
								item.imgUrl = val.value
							}
						})
					}
				})
			})
			detailData.tenementNotice = [...detailData.tenementNotice, ...resetArr];
		}else {
			uni.$showMsg(message)
		}
	}
	getNoticeList()
</script>

<style lang="scss" scoped>
	.property-container {
		padding: 10rpx 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #F6F8FC;
		width: 100%;
		min-height: 100%;
	}
	
	.display-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>